<!DOCTYPE>
<html>

<head>
    <meta charset="utf-8">
    <title>task17 零基础JavaScript编码（五）</title>
    <style type="text/css">
    body {
        display: flex;
        flex-direction: column;
    }
    .aqi-chart-wrap{
            display: flex;
    align-items: flex-end;
    }
    .aqi-chart-wrap span{
        position:absolute;
        bottom:-20px;
        left:0;
        right:0;
        font-size:.2vw;
    }
    .aqi-chart-wrap div {
        display: inline-block;
        position:relative;
            text-align: center;
    }
    
    .wrap {
        padding-bottom: 2%;
        margin: auto;
    }
    </style>
</head>

<body>
    <fieldset id="form-gra-time">
        <legend>请选择日期粒度：</legend>
        <label>日
            <input name="gra-time" value="day" type="radio" checked="checked">
        </label>
        <label>周
            <input name="gra-time" value="week" type="radio">
        </label>
        <label>月
            <input name="gra-time" value="month" type="radio">
        </label>
    </fieldset>
    <fieldset>
        <legend>请选择查看的城市：</legend>
        <select id="city-select">
            <option>北京</option>
        </select>
    </fieldset>
    <div class="wrap">
    <div id="y-coor"></div>  
    <div class="aqi-chart-wrap" id="aqi-chart-wrap"></div>
    </div>
    <script src="task.js"></script>
    
</body>

</html>